<template>
  <div>
    <div class="header-2">
    <div></div>
      <div @click="topage('home')">首页</div>
      <div class="inputboxAlign">
        <el-input id="el_input" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <div @click="topage('/shoppingcart')" class="cursor_style">
        <i class="el-icon-shopping-cart-full"></i>购物车
      </div>
      <div class="cursor_style">
        <i class="el-icon-user-solid"></i>{{ showUserName }}
        <!-- 显示用户名的 -->
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3>收货地址</h3>
      </div>
      <div class="text item" style="display: flex;">
          <h3> 贵州省贵阳市南明区区贵州理工学院</h3>
          <div style="margin-left: 60%;">
            <el-button type="warning" round>编辑</el-button>
            <el-button type="danger" round>新增</el-button>
            <el-button type="info" round>删除</el-button>
          </div>
      </div>
    </el-card>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                showUserName: ""
            };
        },
        mounted() {
            this.showUserName = this.$store.state.showUserName;
        },
        methods: {
            topage(toPath) {
                this.$router.push(toPath);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .text {
        font-size: 14px;
    }
    
    .item {
        margin-bottom: 18px;
    }
    
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .box-card {
        width: 78%;
        margin: 20px auto;
    }
    
    .inputboxAlign {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        max-width: 500px;
    }
    
    .el-button {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        margin-left: 5px;
    }
    
    .cursor_style {
        cursor: pointer;
    }
    
    .header-2 {
        display: grid;
        grid-template-columns: 165px 600px 1fr repeat(3, 90px) 50px;
        height: 60px;
        justify-content: center;
        align-items: center;
        background-color: black;
        color: white;
        padding-left: 20px;
        div {
            cursor: pointer;
        }
        i {
            margin: 0 10px;
        }
    }
</style>